<template>
	<view class="menu" @touchmove="cancel" @tap="cancel" v-show="value">
		<view class="menu_body" @touchmove.stop.prevent @tap.stop.prevent>
			<view @tap.stop="clickMessge">
				<image src="/static/svg/menu5.svg" mode=""></image>
				<text>消息</text>
				<text class="message_number" v-if="num">{{num}}</text>
			</view>
			<view @tap.stop="clickShop">
				<image src="/static/svg/menu1.svg" mode=""></image>
				<text>商城</text>
			</view>
			<view @tap.stop="clickHome">
				<image src="/static/svg/menu2.svg" mode=""></image>
				<text>居家</text>
			</view>
			<view @tap.stop="clickCart">
				<image src="/static/svg/menu3.svg" mode=""></image>
				<text>购物车</text>
			</view>
			<view @tap.stop="clickMy">
				<image src="/static/svg/menu4.svg" mode=""></image>
				<text>我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			cancel(){
				this.$emit("input", false)
			},
			clickMessge(){
				// console.log(132)
			},
			clickShop(){
				// console.log(132)
			},
			clickHome(){
				// console.log(132)
			},
			clickCart(){
				// console.log(132)
			},
			clickMy(){
				// console.log(132)
			}
		},
		props: ['value','num']
	}
</script>

<style lang="scss">
.menu{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color:transparent;
	z-index: 10000;
}
.menu_body{
	height: 518rpx;
	width: 280rpx;
	position: absolute;
	right: 20rpx;
	top: 76rpx;
	background-image: url("/static/svg/menuImg.svg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: 0 0;
	display: flex;
	flex-flow: column;
	justify-content: flex-end;
	padding-bottom: 50rpx;
	view{
		display: flex;
		align-items: center;
		position: relative;
		padding-left: 60rpx;
		margin-top: 50rpx;
		image{
			height: 40rpx;
			width: 40rpx;
			margin-right: 27rpx;
		}
		text{
			font-size: 30rpx;
			letter-spacing: 1rpx;
			color: #FFFFFF;
		}
		.message_number{
			display: block;
			position: absolute;
			left:214rpx;
			font-size: 22rpx;
			color: #F2EFEC;
			letter-spacing: 0;
			height: 30rpx;
			padding: 0 4rpx;
			line-height: 30rpx;
			border-radius: 15rpx;
			background-color: #E35242;
		}
	}
	
}
</style>
